<!DOCTYPE html>
<html>
<head>
    <style>
        .container {
            width: 600px;
            height: 500px;
            background: #f0f0f0;
            position: relative;
            border-radius: 8px;
            padding: 20px;
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        .array-container {
            display: flex;
            flex-wrap: wrap;
            gap: 4px;
            margin-top: 50px;
            width: 100%;
        }
        .block {
            display: flex;
            flex-direction: column;
            gap: 4px;
            margin-bottom: 20px;
            padding: 10px;
            border: 2px solid #1976D2;
            border-radius: 4px;
        }
        .block-header {
            font-size: 14px;
            color: #666;
            margin-bottom: 5px;
        }
        .array-element {
            width: 40px;
            height: 40px;
            background: #90CAF9;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 4px;
            font-size: 16px;
            color: #333;
            transition: all 0.3s;
            border: 2px solid #1976D2;
        }
        .status {
            margin-top: 30px;
            font-size: 16px;
            color: #333;
            font-family: Arial, sans-serif;
        }
        .target-display {
            margin-top: 20px;
            font-size: 18px;
            color: #333;
            font-family: Arial, sans-serif;
        }
    </style>
</head>
<body style="margin: 0; display: flex; justify-content: center; align-items: center; height: 100vh; background: #f0f0f0;">
    <div class="container">
        <div class="target-display" id="target-display"></div>
        <div class="array-container" id="array-container"></div>
        <div class="status" id="status"></div>
    </div>

    <script>
        // 创建分块数组
        const blocks = [
            { max: 20, elements: [10, 15, 20] },
            { max: 40, elements: [25, 30, 35, 40] },
            { max: 60, elements: [45, 50, 55, 60] },
            { max: 80, elements: [65, 70, 75, 80] },
            { max: 100, elements: [85, 90, 95, 100] }
        ];
        let target = 50; // 要查找的目标值

        // 创建分块数组可视化
        function createBlocks() {
            const container = document.getElementById('array-container');
            container.innerHTML = '';
            
            blocks.forEach((block, index) => {
                const blockDiv = document.createElement('div');
                blockDiv.className = 'block';
                
                const header = document.createElement('div');
                header.className = 'block-header';
                header.textContent = `块 ${index + 1} (最大值: ${block.max})`;
                blockDiv.appendChild(header);

                block.elements.forEach(num => {
                    const element = document.createElement('div');
                    element.className = 'array-element';
                    element.textContent = num;
                    blockDiv.appendChild(element);
                });

                container.appendChild(blockDiv);
            });

            // 显示目标值
            document.getElementById('target-display').textContent = `查找目标值: ${target}`;
        }

        // 更新状态显示
        function updateStatus(message) {
            document.getElementById('status').textContent = message;
        }

        // 分块查找动画
        async function blockSearch() {
            const elements = document.querySelectorAll('.array-element');
            const blocks = document.querySelectorAll('.block');
            
            // 重置所有元素的颜色
            elements.forEach(el => {
                el.style.backgroundColor = '#90CAF9';
                el.style.borderColor = '#1976D2';
            });

            // 第一步：确定目标值所在的块
            let targetBlock = null;
            for (let i = 0; i < blocks.length; i++) {
                const block = blocks[i];
                const max = parseInt(block.querySelector('.block-header').textContent.match(/最大值: (\d+)/)[1]);
                
                // 高亮当前检查的块
                block.style.borderColor = '#FF4081';
                updateStatus(`检查块 ${i + 1} (最大值: ${max})`);
                await new Promise(resolve => setTimeout(resolve, 1000));

                if (target <= max) {
                    targetBlock = block;
                    block.style.borderColor = '#4CAF50';
                    updateStatus(`目标值 ${target} 可能在块 ${i + 1} 中`);
                    break;
                }

                block.style.borderColor = '#E0E0E0';
                await new Promise(resolve => setTimeout(resolve, 1000));
            }

            if (!targetBlock) {
                updateStatus(`未找到目标值 ${target}`);
                return;
            }

            // 第二步：在目标块中进行顺序查找
            const blockElements = targetBlock.querySelectorAll('.array-element');
            for (let i = 0; i < blockElements.length; i++) {
                const element = blockElements[i];
                const value = parseInt(element.textContent);

                element.style.backgroundColor = '#FF4081';
                updateStatus(`在块中检查元素: ${value}`);
                await new Promise(resolve => setTimeout(resolve, 1000));

                if (value === target) {
                    element.style.backgroundColor = '#4CAF50';
                    updateStatus(`找到目标值 ${target}`);
                    return;
                }

                element.style.backgroundColor = '#E0E0E0';
                await new Promise(resolve => setTimeout(resolve, 1000));
            }

            updateStatus(`在块中未找到目标值 ${target}`);
        }

        // 初始化并开始动画
        function init() {
            createBlocks();
            setTimeout(blockSearch, 1000);
        }

        init();

        // 每15秒重置并重新开始，同时随机选择一个新的目标值
        setInterval(() => {
            const allElements = blocks.flatMap(block => block.elements);
            target = allElements[Math.floor(Math.random() * allElements.length)];
            init();
        }, 15000);
    </script>
</body>
</html> 